<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>
                        全选:
                        <input type="checkbox">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成内容tr -->
                <tr v-for="(item,index) of products" :key="item.id">
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>
                        <img width="100" :src="item.imgSrc" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button>-</button>
                        &nbsp;
                        {{item.count}}
                        &nbsp;
                        <button>+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
        </div>
    </div>
</body>

</html>
<script>
    // table和 thead tbody tr td配套  ul一般套li ol也套li a标签里面不能套a标签


    //功能
    //1.根据数据将结构动态的创建

    //2.增加

    //3.删除

    //写这些功能之前首先要把数据做好

    //以后后端返回的列表数据 [{id:xx,name:xx},{id:xx,name:xx},{id:xx,name:xx},{id:xx,name:xx}]

    //key的作用:
    //1.diff的时候,辨识节点的唯一性性

    //2.提高diff的效率,没有key的时候,diff会尽可能的减少修改/复用同类型节点,有key的时候,节点重新排序,没有key的节点会被移除


    //本地永久存储 核心思想:数据只要从本地获取就可以了

    //封装localstoreage方法

    let local = {
        get(key) {
            return JSON.parse(localStorage.getItem(key))
        },
        set(key, value) {
            localStorage.setItem(key, JSON.stringify(value))
        }
    }

    //初始数据
    let initialData = ([
        {
            id: 1,
            imgSrc: "https://www.52doutuwang.com/wp-content/uploads/2021/07/20210722162327_24213.jpg",
            code: "1122",
            productName: "吴签的签",
            count: 1,
            price: 0.01
        },
        {
            id: 2,
            imgSrc: "https://ts1.cn.mm.bing.net/th/id/R-C.edf7a1ef9fdacc6c071debc5b50dc833?rik=7rsLBtPC8o50SA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20118%2f542%2fw859h483%2f20190531%2ffdc8-hxvzhte7315115.jpg&ehk=YlmM7NGbAkW6H9blYsgEVa7CoicWQ99m%2bvYbp6fI25Q%3d&risl=&pid=ImgRaw&r=0",
            code: "1123",
            productName: "品如的衣柜",
            count: 10,
            price: 100
        }
    ])

    let vm = new Vue({
        el: '#app',
        data: {
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            //对象中的字段 产品图片 编号 产品名称 数量 价格
            products: local.get('qf-data') ?? initialData
        },
        methods: {
            del(index) {
                console.log(index)
                // 删除的逻辑怎么写? 数组中通过splice方法去掉某一项,就能删除了
                this.products.splice(index, 1)
                //将products整个数据存到本地
                local.set('qf-data', this.products)
            },
            add() {
                //非空校验
                if (!this.code || !this.imgSrc || !this.price || !this.productName) {
                    return
                }
                //添加的思路,收集输入框的数据,然后添加到products数组中,数组多一项,视图就会多增加一项
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    imgSrc: this.imgSrc,
                    code: this.code,
                    productName: this.productName,
                    count: 1,
                    price: this.price
                }
                //添加到数据数组中products
                this.products.push(obj)

                //将products整个数据存到本地
                local.set('qf-data', this.products)
            }
        }
    })
</script>